<template>
  <div class="photo">
    <div class="p_desc">订单包含的商品</div>
    <div class="goodsList">
      <!-- 交易快照 商品信息demo -->
      <div class="goodsItem"
           v-for="item in imgList"
           :key="item.id">
        <div class="pic_words">
          <!-- 左边图片 -->
          <div class="goodsItem_left">
            <img :src="item.src"
                 alt="">
          </div>
          <!-- 右边信息 -->
          <div class="goodsItem_right">
            <div class="goodsTitle">{{item.title}}</div>
            <div class="weight_price">
              <div>{{item.weight}}</div>
              <div>{{item.num}}</div>
            </div>
          </div>
        </div>
        <!-- 交易快照按钮 -->
        <div class="btn">
          <button class="photoBtn"
                  @click="goodsDetails(item)">交易快照</button>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { getOrderData } from '../../api/order'
export default {
  data () {
    return {

    }
  },
  props: ["imgList"],
  methods: {
    goodsDetails (obj) {
      this.$router.push({ path: '/goodsDetails', query: { imgList: JSON.stringify(obj) } })
    },
    // 获取订单信息
    getList () {
      getOrderData({
        orderType: 0,
        currentPage: 1,
        pageSize: 2,
        orderId: this.orderId
      })
        .then((res) => {
          console.log(res);
          this.list = res
          console.log(this.list);
          // console.log(this.orderId);  undefined
        })
        .catch((err) => {
          console.log(err);
        })
    }
  },
  created () {
    // this.getList()
  }

}
</script>

<style scoped lang="scss">
.photo {
  background-color: #fff;
  margin: 10px;
  border-radius: 15px;
}
.p_desc {
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
}
.goodsTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodsItem {
  padding: 0px 10px;
  margin-top: 15px;
  border-bottom: 1px solid rgb(234, 232, 232);
}
.pic_words {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.goodsItem_left {
  width: 20%;
}
.goodsItem_right {
  width: 75%;
}
.goodsItem_left img {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(195, 193, 193);
}
.goodsTitle,
.weight_price {
  height: 30px;
  line-height: 30px;
}
.weight_price {
  display: flex;
  justify-content: space-between;
}
.btn {
  width: 100%;
  height: 40px;
}
.photoBtn {
  height: 30px;
  line-height: 30px;
  width: 80px;
  color: rgb(56, 56, 56);
  background-color: #fff;
  border: rgb(188, 186, 186) 1px solid;
  border-radius: 15px;
  display: inline-block;
  float: right;
}
</style>